<template>
  <div class="card">
    <!--热搜平台列表-->
    <el-tabs class="tabs" v-model="activeName"  type="border-card" @tab-click="handleClick">
      <el-tab-pane :label="platformList.webname" :name="platformList.webname" :key="platformList.id" v-for="platformList in platformLists"></el-tab-pane>
    </el-tabs>

    <HotShow v-if="$route.name!=='Chart'" :webname="webname"></HotShow>
    <BarAndLineChart  v-if="$route.name ==='Chart' && balshow" :webname="webname"></BarAndLineChart>
    <DailyTopSortBar  v-if="$route.name ==='Chart' && dsshow"  :webname="webname"></DailyTopSortBar>
    <WordCloud v-if="$route.name ==='Chart' && wcshow "  :webname="webname" style="width: 1000px"></WordCloud>
    <PieChart  v-if="$route.name ==='Chart' && pieshow"  :webname="webname"></PieChart>
    <MonthlyTopSortBar  v-if="$route.name ==='Chart' && msshow"  :webname="webname"></MonthlyTopSortBar>

  </div>
</template>

<script>
import HotShow from "../components/HotShow";
import BarAndLineChart from "../components/BarAndLineChart";
import PieChart from "../components/PieChart";
import DailyTopSortBar from "../components/DailyTopSortBar";
import MonthlyTopSortBar from "../components/MonthlyTopSortBar";
import WordCloud from "../components/WordCloud";

export default {
  name: "HotTab",
  components: {HotShow,BarAndLineChart,PieChart,DailyTopSortBar,MonthlyTopSortBar,WordCloud},
  data(){
    return{
      platformLists: [],
      chartLists: [],
      activeName: '',
      webname: '',
      balshow: false,
      pieshow: false,
      dsshow: false,
      msshow: false,
      wcshow: false,
    }
  },
  methods: {
    getPlatformLists(){
      const _this = this
      this.$axios.get(this.$base_url+'sys/webinfo').then(res => {
        _this.platformLists=res.data.data
        _this.activeName=_this.platformLists[0].webname
        _this.webname = _this.platformLists[0].webname
      })
    },

    getChartInfo(){
      const _this = this
      this.$axios.get(this.$base_url+'sys/chartinfo').then(res => {
        for (let item of res.data.data) {
          switch (item.chartname){
            case '折线和柱状图':
              _this.balshow=true;
              break
            case '饼图':
              _this.pieshow=true;
              break
            case '每日top排序图':
              _this.dsshow=true;
              break
            case '每月top排序图':
              _this.msshow=true;
              break
            case '词云图':
              _this.wcshow=true;
              break
          }
        }
      })
    },

    handleClick(tab) {
      const _this = this
      var id = tab.index
      var platformid = _this.platformLists[id].id
      switch (platformid){
        case 3:
          _this.webname = '腾讯新闻'
          break;
        case 2:
          _this.webname = '今日头条'
          break;
        case 4:
          _this.webname = '百度热搜'
          break;
        case 1:
          _this.webname = '微博热搜'
          break;
      }
    }
  },
  created() {
    if (this.$route.name ==='Chart'){
      this.getChartInfo()
    }
    if (this.$route.name ==='Index' || this.$route.name ==='Query' || this.$route.name ==='Chart'){
      this.getPlatformLists()
    }
  },

}
</script>

<style scoped>
/*控制elementui的样式*/
::v-deep .el-tabs__item.is-top{
  width: 175px !important;
  font-size: 20px;
  text-align: center;
}

.tabs {
  height: 35px;
  background-color: white;
}

</style>